<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>this的四种绑定 | Kc的博客</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/img/prompt.png">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/main.js"></script>
    <meta name="description" content="谁来督促我写blog">
    <link rel="preload" href="/assets/css/0.styles.ccac5a78.css" as="style"><link rel="preload" href="/assets/js/app.d62b2ae9.js" as="script"><link rel="preload" href="/assets/js/2.96f3cffc.js" as="script"><link rel="preload" href="/assets/js/14.06083ba6.js" as="script"><link rel="prefetch" href="/assets/js/10.d376fefb.js"><link rel="prefetch" href="/assets/js/11.6f69af3f.js"><link rel="prefetch" href="/assets/js/12.e521ba13.js"><link rel="prefetch" href="/assets/js/13.0169d26e.js"><link rel="prefetch" href="/assets/js/15.d36dd989.js"><link rel="prefetch" href="/assets/js/3.c15b449a.js"><link rel="prefetch" href="/assets/js/4.1cfc2f80.js"><link rel="prefetch" href="/assets/js/5.46b265b1.js"><link rel="prefetch" href="/assets/js/6.518c9c90.js"><link rel="prefetch" href="/assets/js/7.91014483.js"><link rel="prefetch" href="/assets/js/8.d25ee443.js"><link rel="prefetch" href="/assets/js/9.d986ac6b.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ccac5a78.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Kc的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">
  HTML
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="CSS" class="dropdown-title"><span class="title">CSS</span> <span class="arrow down"></span></button> <button type="button" aria-label="CSS" class="mobile-dropdown-title"><span class="title">CSS</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/csscontent/othcss/" class="nav-link">
  less|scss
</a></li><li class="dropdown-item"><!----> <a href="/csscontent/transition/" class="nav-link">
  动画
</a></li></ul></div></div><div class="nav-item"><a href="/jscontent/" class="nav-link router-link-active">
  JS|Typescript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://tool.oschina.net/encrypt?type=3" target="_blank" rel="noopener noreferrer" class="nav-link external">
  解码
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://tool.lu/timestamp/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线时间戳转换
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://designer.mocky.io/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线mock
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="收藏网页|博客" class="dropdown-title"><span class="title">收藏网页|博客</span> <span class="arrow down"></span></button> <button type="button" aria-label="收藏网页|博客" class="mobile-dropdown-title"><span class="title">收藏网页|博客</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://gitlab.redrock.team/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  gitlab
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">
  HTML
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="CSS" class="dropdown-title"><span class="title">CSS</span> <span class="arrow down"></span></button> <button type="button" aria-label="CSS" class="mobile-dropdown-title"><span class="title">CSS</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/csscontent/othcss/" class="nav-link">
  less|scss
</a></li><li class="dropdown-item"><!----> <a href="/csscontent/transition/" class="nav-link">
  动画
</a></li></ul></div></div><div class="nav-item"><a href="/jscontent/" class="nav-link router-link-active">
  JS|Typescript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://tool.oschina.net/encrypt?type=3" target="_blank" rel="noopener noreferrer" class="nav-link external">
  解码
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://tool.lu/timestamp/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线时间戳转换
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://designer.mocky.io/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线mock
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="收藏网页|博客" class="dropdown-title"><span class="title">收藏网页|博客</span> <span class="arrow down"></span></button> <button type="button" aria-label="收藏网页|博客" class="mobile-dropdown-title"><span class="title">收藏网页|博客</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://gitlab.redrock.team/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  gitlab
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>原生JS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/jscontent/notes/extends.html" aria-current="page" class="active sidebar-link">this的四种绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#_1-this的默认绑定" class="sidebar-link">1.this的默认绑定</a></li><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#_2-this的隐式绑定" class="sidebar-link">2.this的隐式绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#_2-1隐式丢失" class="sidebar-link">2.1隐式丢失</a></li></ul></li><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#_3-显式绑定" class="sidebar-link">3.显式绑定</a></li><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#_4-new绑定" class="sidebar-link">4.new绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#ps-箭头函数" class="sidebar-link">Ps:=&gt;箭头函数</a></li></ul></li><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#二、原型链继承" class="sidebar-link">二、原型链继承</a></li><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#三、借用父类构造函数继承" class="sidebar-link">三、借用父类构造函数继承</a></li><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#四、组合式继承-原型链继承-借用构造函数继承" class="sidebar-link">四、组合式继承(原型链继承 + 借用构造函数继承)</a></li><li class="sidebar-sub-header"><a href="/jscontent/notes/extends.html#五、es6的class继承" class="sidebar-link">五、ES6的class继承</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>TypeScrip学习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="this的四种绑定"><a href="#this的四种绑定" class="header-anchor">#</a> this的四种绑定</h1> <p>this的绑定取决于它的调用位置，而不是取决于它的声明位置</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">baz</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//调用栈baz,当前调用位置全局</span>
    <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//调用栈baz-&gt;bar,调用位置baz</span>
    <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//调用栈baz-&gt;bar-&gt;foo,调用位置bar</span>
<span class="token punctuation">}</span>
<span class="token function">baz</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="_1-this的默认绑定"><a href="#_1-this的默认绑定" class="header-anchor">#</a> 1.this的默认绑定</h2> <p>​		首先要介绍的是最常用的函数调用类型：独立函数调用。这条规则是无法应用其他规则时的默认规则。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>​	foo()是直接使用不带任何修饰的函数引用进行调用，只能使用默认绑定。当中的this指向全局对象。但在严格模式下，则不能将全局对象用于默认绑定，this会绑定到undefined</p> <h2 id="_2-this的隐式绑定"><a href="#_2-this的隐式绑定" class="header-anchor">#</a> 2.this的隐式绑定</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span>
	a<span class="token operator">:</span><span class="token number">42</span><span class="token punctuation">,</span>
	foo<span class="token operator">:</span>foo
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span>
    a<span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span>
    obj2<span class="token operator">:</span>obj2
<span class="token punctuation">}</span>
<span class="token keyword">var</span> a<span class="token operator">=</span><span class="token number">3</span><span class="token punctuation">;</span>
obj1<span class="token punctuation">.</span>obj2<span class="token punctuation">.</span><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//42</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>无论foo无论是在obj中定义还是先定义在添加为应用，这个函数严格来说都不属于obj对象。然而在调用位置使用obj上下文来引用对象时，可以说函数被调用时obj包含对函数的引用。</p> <p>当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。<strong>并且对象属性引用链只有最后一层调用位置起作用</strong></p> <h3 id="_2-1隐式丢失"><a href="#_2-1隐式丢失" class="header-anchor">#</a> 2.1隐式丢失</h3> <hr> <ul><li><p>函数别名</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>var bar = obj2.foo();
bar();//3
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>bar引用的是函数本身是一个不带修饰的函数调用，应用了默认绑定</p></li> <li><p>间接引用</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>var p = {a:4}
obj2.foo();//42
(p.foo = obj2.foo)();//3返回值是目标函数引用调用位置是foo()引用默认绑定
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li> <li><p>回调函数</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token function">setTimeout</span><span class="token punctuation">(</span>obj2<span class="token punctuation">.</span>foo<span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>参数传递的过程是一种隐式赋值</p></li></ul> <h2 id="_3-显式绑定"><a href="#_3-显式绑定" class="header-anchor">#</a> 3.显式绑定</h2> <p>使用函数的call(...)、apply(...)来直接指定this的绑定对象。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
	a<span class="token operator">:</span><span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token function">foo</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li><p>使用bind解决隐式丢失(一些函数也有context选项确保指定的this)</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter">something</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">+</span> something<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
	a<span class="token operator">:</span><span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token function">foo</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token comment">//5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li></ul> <h2 id="_4-new绑定"><a href="#_4-new绑定" class="header-anchor">#</a> 4.new绑定</h2> <p>js中的构造函数不属于某个类，也不会实例化一个类，它们只是被new操作符调用的普通函数</p> <p>只用new调用函数会执行</p> <div class="language- extra-class"><pre><code>1. 构造一个全新的对象
2. 新对象会执行Prototype链接
3. 新对象会绑定到函数调用的this
4. 如果函数没有返回其他对象，new表达式中函数调用会自动返回这个新对象
</code></pre></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> a<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">foo</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bar<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><hr> <p>优先级：new绑定&gt;显示绑定&gt;隐式绑定&gt;默认绑定</p> <h3 id="ps-箭头函数"><a href="#ps-箭头函数" class="header-anchor">#</a> Ps:=&gt;箭头函数</h3> <p>箭头函数不使用this的四种标准规则，而是根据外层作用域决定。箭头函数的绑定无法修改</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
		<span class="token comment">//this继承自foo()</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token function">foo</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj1<span class="token punctuation">)</span>
<span class="token function">bar</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj2<span class="token punctuation">)</span><span class="token comment">//2,不是3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">}</span>
<span class="token function">foo</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><hr> <h1 id="继承"><a href="#继承" class="header-anchor">#</a> 继承</h1> <h2 id="二、原型链继承"><a href="#二、原型链继承" class="header-anchor">#</a> 二、原型链继承</h2> <blockquote><p>代码示例</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>function Parent (sex) {
    this.sex = sex
}

Parent.prototype.setSex = function () {}

function Son (name) {
    this.name = name
}

Son.prototype = new Parent()
var s1 = new Son('DBCDouble')
console.log(s1)
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><blockquote><p>结果打印</p></blockquote> <p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a69f08f914c64f8a80ae3efb36959216~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p> <p><strong>关键：<strong>把</strong>子类的原型</strong>指向<strong>父类的实例</strong>，从而<strong>继承父类</strong>的<strong>私有属性</strong>和<strong>原型属性</strong></p> <p><strong>优点：</strong></p> <ul><li>父类<strong>新增原型</strong>属性和方法，子类实例都能访问到</li> <li>简单、易用</li></ul> <p><strong>缺点：</strong></p> <ul><li>无法实现<strong>多继承</strong>（一个子类继承成多个父类）</li> <li>创建子类实例的时候，无法向<strong>父类构造函数传参</strong></li> <li>有子类实例共享<strong>父类引用属性</strong>的问题（因为子类的原型指向的是父类的一个实例，假如父类的私有属性有一个是数组(引用类型)，那么任一子类都可以操作这个数组，从而导致其他子类使用的这个数组也会发生变化）</li></ul> <h2 id="三、借用父类构造函数继承"><a href="#三、借用父类构造函数继承" class="header-anchor">#</a> 三、借用父类构造函数继承</h2> <blockquote><p>代码示例</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>function Parent (sex) {
    this.sex = sex
}

Parent.prototype.setSex = function () {}

function Son (name, age, sex) {
    Parent.call(this, sex)
    this.name = name
    this.age = age
}
var s1 = new Son('DBCdouble', 25, '男')
console.log(s1)
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><blockquote><p>结果打印</p></blockquote> <p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d058bce5b7844a98c0dfe8ee791f0e6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p> <p><strong>关键：在子类构造函数中使用call或者apply调用父类构造函数</strong>实现父类<strong>私有属性继承</strong>（函数复用）</p> <p><strong>优点：</strong></p> <ul><li>创建子类实例时，可以向<strong>父类传递参数</strong></li> <li>可以实现<strong>多继承</strong>（在子类构造函数调用多个父类构造函数）</li> <li>解决了原型链继承中子类实例共享父类引用属性的问题（即使父类构造函数中有引用类型，在创建子类实例时，都会重新调用父类构造函数重新创建一份这个引用类型数据，重新申请引用类型的空间）</li></ul> <p><strong>缺点：</strong></p> <ul><li>每次创建子类实例时，<strong>都要调用</strong>一次父类构造函数，<strong>影响性能</strong></li> <li>只继承父类的<strong>实例属性(私有属性)</strong>，没有继承父类的<strong>原型属性</strong></li></ul> <h2 id="四、组合式继承-原型链继承-借用构造函数继承"><a href="#四、组合式继承-原型链继承-借用构造函数继承" class="header-anchor">#</a> 四、组合式继承(原型链继承 + 借用构造函数继承)</h2> <blockquote><p>代码示例</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">Parent</span> <span class="token punctuation">(</span><span class="token parameter">sex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>sex <span class="token operator">=</span> sex
<span class="token punctuation">}</span>

<span class="token class-name">Parent</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">setSex</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">Son</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> sex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">Parent</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> sex<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
<span class="token punctuation">}</span>
<span class="token class-name">Son</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token class-name">Parent</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token comment">//创建一个新的Son.prototype对象并把它**关联**到Parent.prototype</span>
<span class="token class-name">Son</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> Son
<span class="token keyword">var</span> s1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Son</span><span class="token punctuation">(</span><span class="token string">'DBCdouble'</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'男'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s1<span class="token punctuation">)</span>
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>打印结果</p></blockquote> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eafeaa746b5c426c82429dda60988071~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p> <p><strong>关键：<strong>通过</strong>调用父类构造函数</strong>，继承父类的属性并<strong>保留传参</strong>的优点，并通过<strong>Object.create(Parent.prototype)<strong>来创建继承了父类原型属性的对象，并把这个对象赋给子类的原型，这样的话，既能保证父类构造函数</strong>不用执行两次</strong>，又能让子类能继承到<strong>父类的原型方法</strong></p> <p><strong>优点：</strong></p> <ul><li>创建子类实例时，可以向<strong>父类传递参数</strong></li> <li>可以实现<strong>多继承</strong>（在子类构造函数调用多个父类构造函数）</li> <li>解决了原型链继承中子类实例<strong>共享父类引用属性</strong>的问题（即使父类构造函数中有引用类型，在创建子类实例时，都会<strong>重新调用</strong>父类构造函数<strong>重新创建一份</strong>这个引用类型数据，<strong>重新申请引用类型的空间</strong>）</li> <li>父类构造函数只用<strong>执行一次</strong></li></ul> <h2 id="五、es6的class继承"><a href="#五、es6的class继承" class="header-anchor">#</a> 五、ES6的class继承</h2> <p>ES6中引入了<strong>class关键字</strong>，class可以通过extends关键字实现继承，还可以通过<strong>static</strong>关键字定义类的静态方法，这比 ES5 的通过修改原型链实现继承，要<strong>清晰和方便</strong>很多。</p> <blockquote><p><strong>注意：ES5 的继承</strong>，实质是<strong>先创造子类的实例对象this</strong>，然后<strong>再将父类的方法添加到this</strong>上面（Parent.apply(this)）。<strong>ES6 的继承机制完全不同</strong>，实质是<strong>先将父类实例对象的属性和方法加到this上面（所以必须先调用super方法）</strong>，<strong>然后再用子类的构造函数修改this</strong>。</p></blockquote> <blockquote><p>代码示例</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>class A {
  constructor (sex) {
    this.sex = sex
  }
  showSex () {
    console.log('这里是父类的方法')
  }
}

class B extends A {
  constructor (name, age, sex) {
    super(sex);
    this.name = name;
    this.age = age;
  }

  showSex () {
    console.log('这里是子类的方法')
  }
}

const b = new B('DBCDOUBLE', 25, '男')
console.log(b);
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><blockquote><p>打印结果</p></blockquote> <p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52920f12f8e8487b95cd04c078066397~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p> <p>关键：使用<strong>extends</strong>关键字继承父类的原型属性，调用<strong>super</strong>来继承父类的实例属性，且<strong>保留向父类构造函数传参</strong>的优点</p> <p><strong>优点：<strong>简单易用，不用自己来</strong>修改原型链来完成继承</strong></p> <p><strong>缺点</strong>：不会像传统面向类的语言一样在声明时静态复制所以行为，super不能动态绑定</p> <p>我们通过将代码从ES6编译到ES5来看看到底，class继承的代码最终会被编译成什么样，如下：</p> <p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/638342cab3bd425e8c699b7382960549~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p> <p>从上图分析得到：</p> <ul><li>上述代码示例中的<strong>super</strong>指的就是<strong>父类构造函数</strong></li> <li>子类继承父类的<strong>实例属性</strong>最终还是通过<strong>call或者apply</strong>来实现继承的</li> <li>通过<strong>extends</strong>方法的调用来<strong>修改子类和父类的原型链关系</strong></li></ul> <p>再看经过<strong>编译后的extends</strong>方法，如下</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbb90ba944cd4b7985b85de6d2c186bd~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p> <blockquote><p><strong>1、注意</strong><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf" target="_blank" rel="noopener noreferrer"><strong>Object.setPrototypeOf()</strong><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null" target="_blank" rel="noopener noreferrer"><code>null</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。
<strong>2、**<em><em>(*</em>.prototype = b.prototype, new*</em> ())表达式的执行执行顺序是先执行前者，再返回后者</strong></p></blockquote> <p>从上图可知，extends做了以下几件事：</p> <ul><li>定义了一个function __() {}函数，并把该函数的constructor指向了子类</li> <li>紧接着，把function __() {} 函数的原型指向了父类的原型</li> <li>最后再把function <strong>() {} 函数的实例赋给了子类函数，就这样子类的实例就能沿着</strong>proto.<strong>proto</strong>获取到父类的原型属性了，这种继承模式俗称圣杯模式</li></ul> <h1 id="对象关联风格代码"><a href="#对象关联风格代码" class="header-anchor">#</a> 对象关联风格代码</h1> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>Foo <span class="token operator">=</span> <span class="token punctuation">{</span>
	<span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">who</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>me <span class="token operator">=</span> who<span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function-variable function">identify</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">return</span> <span class="token string">&quot;I am&quot;</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>me<span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	count<span class="token operator">:</span><span class="token number">1</span>
<span class="token punctuation">}</span>
Bar <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>Foo<span class="token punctuation">)</span><span class="token punctuation">;</span>

Bar<span class="token punctuation">.</span><span class="token function-variable function">speak</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;Hello,&quot;</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">identify</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> b1 <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>Bar<span class="token punctuation">)</span><span class="token punctuation">;</span>
b1<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">&quot;b1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b2 <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>Bar<span class="token punctuation">)</span><span class="token punctuation">;</span>
b2<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">&quot;b2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

b1<span class="token punctuation">.</span><span class="token function">speak</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
b2<span class="token punctuation">.</span><span class="token function">speak</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><blockquote><p>原型面向对象风格</p></blockquote> <p><img src="/img/weituo1.png" alt="你不知道的javascript——行为委托| cchroot's blog"></p> <blockquote><p>对象关联风格</p></blockquote> <p><img src="/img/weituo2.png" alt="你不知道的javascript——行为委托| cchroot's blog"></p> <hr> <p>为什么你老是讲不清楚js的继承模式：https://juejin.im/post/6869689622676471816</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/jscontent/notes/ts基础.html">
        我是typescript
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.d62b2ae9.js" defer></script><script src="/assets/js/2.96f3cffc.js" defer></script><script src="/assets/js/14.06083ba6.js" defer></script>
  </body>
</html>
